<template>
    <div>
      <div id="map" class="mapC"></div>
      <div class="eventC">
        <el-button @click="clickChange">导出地图img</el-button>
        <a id="image-download" download="map.png"></a>
      </div>
    </div>
</template>

<script>
import 'ol/ol.css'
import GeoJSON from 'ol/format/GeoJSON'
import Map from 'ol/Map'
import View from 'ol/View'
import {OSM, Vector as VectorSource} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    clickChange () {
      this.map.once('rendercomplete', () => {
        const mapCanvas = document.createElement('canvas')
        const size = this.map.getSize()
        mapCanvas.width = size[0]
        mapCanvas.height = size[1]
        const mapContext = mapCanvas.getContext('2d')
        Array.prototype.forEach.call(
          document.querySelectorAll('.ol-layer canvas'),
          function (canvas) {
            if (canvas.width > 0) {
              const opacity = canvas.parentNode.style.opacity
              mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity)
              const transform = canvas.style.transform
              // Get the transform parameters from the style's transform matrix
              const matrix = transform
              // eslint-disable-next-line
                .match(/^matrix\(([^\(]*)\)$/)[1]
                .split(',')
                .map(Number)
              // Apply the transform to the export map context
              CanvasRenderingContext2D.prototype.setTransform.apply(
                mapContext,
                matrix
              )
              mapContext.drawImage(canvas, 0, 0)
            }
          }
        )
        if (navigator.msSaveBlob) {
          // link download attribuute does not work on MS browsers
          navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png')
        } else {
          const link = document.getElementById('image-download')
          link.href = mapCanvas.toDataURL()
          link.click()
        }
      })
      this.map.renderSync()
    },
    initMap () {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
          }),
          new VectorLayer({
            source: new VectorSource({
              url: 'zlocal/data/geojson/countries.geojson',
              format: new GeoJSON()
            }),
            opacity: 0.5
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
